*{
    margin: 0;
    padding: 0;
}
.containers{
    background: linear-gradient(90deg,rgba(0, 0, 255, 0.1) 10%,transparent 0), 
    linear-gradient(rgba(0, 0, 255, 0.1) 10%, transparent 0);
    background-size: 10px 10px;
}
#containers{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: linear-gradient(90deg,rgba(118, 118, 146, 0.01) 10%,transparent 0), 
    linear-gradient(rgba(0, 0, 255, 0) 10%, transparent 0.01);
    background-size: 10px 10px;
    background-color: rgba(0, 0, 0, 0);
}
#chats{
    position: fixed;
    right: 5%;
    bottom: 5%;
    overflow: hidden;
}
/* 用户列表 */
#userList {
    width: 280px;
    height: 500px;
    background-color:white;
    border-radius: 10px;
   margin-right: 90px;
   margin-bottom: 25px;
   border-radius: 10px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgb(165, 162, 162);
  box-sizing: content-box;/*根据内容填充 不会使父级大小改变 默认是border-sizing*/
  /* display: none; */
}
.textVerticle{
   position: relative;
   top: 8px;
}
.borderLi{
    box-sizing: content-box;
    border: none;
}
.borderLi:hover{
    cursor: pointer;
    background-color: #f8f8f8;
}
.pre-scrollable{
    height: 400px;
}

/* 消息图标 */
#chatIcon{
    width: 50px;
    height: 50px;     
    border-radius: 50%;
    position: fixed;
    right: 6%;
    bottom: 6%;
    background-color: #6ec0f7;
    animation: action 1.5s infinite linear;

}
@keyframes action{
    0%{transform:translateY(-2px);}
    25%{transform:translateY(2px) ;}
    50%{transform:translateY(6px);}
    75%{transform:translateY(3px) ;}
    100%{transform:translateY(-2px) ;}
}
.chat-icon{
    font-size: 50px;
    border-radius: 50%;
    color: white;
    box-shadow: 0 0 20px#90cff8;
    position: absolute;
    top: 1;
    
}
.chat-icon:hover{
    cursor: pointer;
    box-shadow: 0 0 100px#90cff8;
    box-shadow: 0 0 50px#90cff8;
}

/* 遮罩层 */
#shade {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    z-index: 100;
    padding: 5% 20% 8% 25%;
    /* display: none; */
}

.delShade {
    position: absolute;
    color: white;
    right: 5%;
    top: 1%;
    font-size: 40px;
}

.delShade:hover {
    cursor: pointer;
    color: aqua;
}

.chatWindows {
    margin: 0;
    width: 100%;
    height: 100%;
    /* min-width: 100px; */
    max-width: 800px;
    /* min-height: 100px; */
    max-height: 600px;
    background-color: rgb(236, 233, 233);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    box-sizing: content-box;
}

.left {
    width: 25%;
    height: 100%;
    background-color: #fbfbfb;
    border-radius: 3px;
    /* border-right:1px solid #ccc; */
}

.right {
    width: 74%;
    height: 100%;
    background-color: #fbfbfb;
}

.actives {
    background-color: whitesmoke;

}

.actives:hover {
    cursor: pointer;
    background-color: #32bbf1;
}

.changeChannel {
    background-color: #32bbf1;
}
.msgContent{
    display: inline-block;
    max-width: 40%;
    background-color: yellowgreen;
    border-radius: 3px;
    padding: 5px;
    font-size: 15px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.upFile {
    margin: 0;
    padding: 0;
}
.upFileItem{
    margin: 0;
    padding: 0;
    border: none;
}
.messageInput {
    resize: none;
}

.msgSend {
    box-sizing: content-box;
}

.sendBtn {
    text-align: end;
    margin-top: 2%;
    margin-right: 2%;
}